<!-- 1 template  -->
<template>
    <div class="person">
        姓：<input type="text" v-model="firstName"> <br>
        名：<input type="text" v-model="lastName"> <br>
        全名：<span>{{ fullName }}</span> <br>
        <button @click="changeFullName">全名改为：li-si</button>

    </div>
</template>

<!-- 2 script -->
<script setup lang="ts" name='Child'>
import { ref, reactive, computed } from "vue";
let firstName = ref('zhang')
let lastName = ref('san')



//定义计算属性   computed(function )    //function  获取数据的时候调用  get   readonly
// let fullName = computed(() => {
//     return firstName.value + '-' + lastName.value
// })

//计算属性computed {
// set()   get()
//}
let fullName = computed({

    set(val: string) {
        console.log('有人修改了fullName', val)
        firstName.value = val.split('-')[0]
        lastName.value = val.split('-')[1]
    },


    get() {
        return firstName.value + '-' + lastName.value
    }

})

function changeFullName() {

    //Ref类型的数据
    fullName.value = 'li-si'
}

</script>

<!-- 3 style -->
<style scoped></style>